<%--
  Created by IntelliJ IDEA.
  User: 9090
  Date: 2022/12/6
  Time: 11:43
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--上面是标准标签库--%>
<html>

<head>
    <style>
        .table{
            text-align: center;
        }
    </style>

    <title>学生列表</title>
    <%--1.引入bootstrap的css的样式库--%>
    <link rel="stylesheet" href="webjars\bootstrap\3.4.1\dist\css\bootstrap.min.css">
    <%--2. 引入jquery--%>
    <script src="webjars/jquery/3.6.1/dist/jquery.min.js"></script>
    <%--3. 引入bs的js库--%>
    <script src="webjars/bootstrap/3.4.1/dist/js/bootstrap.min.js"></script>


</head>



<body>

    <div class="container">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <div class="panel-title">
                    <h3>学生列表  servlet+mybatis+jquery+bootstrap</h3>
                </div>
            </div>

        <table class="table table-striped table-hover" >
            <tr>
                <td>学号</td>
                <td>姓名</td>
                <td>性别</td>
                <td>年龄</td>
                <td>住址</td>
                <td>所在班级</td>
                <td>操作</td>
            </tr>
            <c:forEach items="${pr.rows}" var="st">
                <tr>
                    <td>${st.sid}</td>
                    <td>${st.sname}</td>
                    <td>${st.sex}</td>
                    <td>${st.age}</td>
                    <td>${st.addr}</td>
                    <td>${st.cname}</td>
                    <td>
                        <a href="#" class="btn btn-success btn-sm" onclick="updateUI(${st.sid},'${st.sname}','${st.sex}',${st.age},'${st.addr}',${st.cid})">修改</a>
                        <a href="/student?cmd=delete&sid=${st.sid}" class="btn btn-danger btn-sm" onclick="return confirm('你真的要删除吗？')">
                            删除
                        </a>
                    </td>
                </tr>
            </c:forEach>

        </table>
            <div class="panel-footer text-right">

                <%--条件查询表单--%>
                <form class="form-inline" style="float: left; margin-top: 20px;" method="post" action="/student?cmd=search">
                    <%--request.getParamter("page")--%>
                    <input type="hidden" name="page" value="${param.page}" id="page">

                    <div class="form-group">
                        <input type="text" name="sname" class="form-control" value="${param.sname}"  placeholder="请输入学生姓名">
                    </div>

                    <div class="form-group">
                        <input type="text" name="addr" class="form-control" value="${param.addr}" placeholder="请输入学生地址">
                    </div>

                    <div class="form-group">
                    <select class="form-control" name="cid" >
                        <option value="0">全体班级</option>
                        <c:forEach items="${classes}" var="c">
                            <option value="${c.cid}" ${c.cid == param.cid ? 'selected' : ''}>${c.cname}</option>
                        </c:forEach>
                    </select>
                    </div>

                    <div class="form-group">
                    <button type="submit" class="btn btn-primary">查询</button>
                    <button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal" onclick="addUI()">添加</button>
                    </div>
                </form>

                <%--分页导航--%>
                <nav aria-label="Page navigation">
                    <ul class="pagination">
                        <li>
                            <a href="#" aria-label="Previous">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li>
                        <c:forEach begin="1" end="${pr.totalPage}" step="1" var="p">
                            <li><a href="#" onclick="skipPage(${p})">${p}</a></li>
                        </c:forEach>

                        <li>
                            <a href="#" aria-label="Next">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        </li>
                    </ul>
                </nav>

                <%-- 3. 模态框--%>

                    <!-- Modal -->
                    <div class="modal fade" id="myModal" >
                        <div class="modal-dialog" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal">
                                        <span aria-hidden="true">&times;</span></button>
                                    <h4 class="modal-title" style="text-align: left">添加学生</h4>
                                </div>

                                <div class="modal-body" style="text-align: left">

                                    <form class="form-horizontal" method="post" action="/student?cmd=add">
                                        <input type="hidden" name="sid" id="sid">
                                        <div class="form-group">
                                            <label  class="col-sm-2 control-label">姓名：</label>
                                            <div class="col-sm-10">
                                                <input type="text" class="form-control" name="sname" id="sname" placeholder="学生姓名">
                                            </div>
                                        </div>
                                        <div class="form-group" style="text-align: left">
                                            <label  class="col-sm-2 control-label">性别：</label>
                                            <div class="col-sm-10">
                                                <div class="radio">
                                                    <label><input type="radio" name="sex" id="sex1" value="男">男</label>
                                                    <label><input type="radio" name="sex" id="sex2" value="女">女</label>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group" style="text-align: left">
                                            <label  class="col-sm-2 control-label">年龄：</label>
                                            <div class="col-sm-10">
                                                <input type="text" class="form-control" name="age" id="age" placeholder="年龄">
                                            </div>
                                        </div>
                                        <div class="form-group" style="text-align: left">
                                            <label  class="col-sm-2 control-label">住址：</label>
                                            <div class="col-sm-10">
                                                <input type="text" class="form-control" name="addr" id="addr" placeholder="住址">
                                            </div>
                                        </div>

                                        <div class="form-group" style="text-align: left">
                                            <label  class="col-sm-2 control-label">班级：</label>
                                            <div class="col-sm-10">
                                                    <select class="form-control" name="cid" id="cid">
                                                        <option value="0">全体班级</option>
                                                        <c:forEach items="${classes}" var="c">
                                                            <option value="${c.cid}" ${c.cid == param.cid ? 'selected' : ''}>${c.cname}</option>
                                                        </c:forEach>
                                                    </select>
                                            </div>
                                        </div>

                                    </form>
                                </div>

                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                    <button type="button" class="btn btn-primary" onclick="save()">保存</button>
                                </div>
                            </div>
                        </div>
                    </div>



            </div>

        </div>
    </div>

</body>



</html>

<script>
    // 当点击按钮提交表单，同时想后端传递page 隐藏域
    function skipPage(p) {
        // 为表单隐藏域赋值
        $("#page").val(p)
        //提交表单
        document.forms[0].submit()
    }
    // 点击修改学生
    function updateUI(sid,sname,sex,age,addr,cid) {
        // 修改表格标题
        $(".modal-title").html("修改学生")
        // 显示表格
        $("#myModal").modal("show")
        // 为表单赋值
        $("#sid").val(sid)
        $("#sname").val(sname)
        $("#sex1").prop("checked",sex == "男" ? true : '' )
        $("#sex2").prop("checked",sex == "女" ? true : '' )
        $("#age").val(age)
        $("#addr").val(addr)
        $("#cid").val(cid)

    }

    function addUI() {
        // 修改表格标题
        $(".modal-title").html("添加学生")
        // 显示表格

        // 清空表单
        document.forms[1].reset()

    }

    function save() {
        // 得到表单中sid的值如果没有值则添加 如果有值则修改
        let sid = $("#sid").val();
        if (sid) {
            console.log("地址被修改成 update 了")
            document.forms[1].action = "/student?cmd=update"
        }
        // 提交表单
        document.forms[1].submit();
    }

</script>